<!--
 * @Descripttion: 全部欠薪诉求-全部
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-11 13:40:05
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-12-18 17:46:39
-->

<template>
  <div class="container">
    <div>
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item label="区域" class="row-padding-bottom">
            <el-cascader
              ref="manageArea"
              v-model="sendAreaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="投诉人" class="row-padding-bottom">
            <el-input
              v-model="filterField.complaintPerName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" class="row-padding-bottom">
            <el-input
              v-model="filterField.complaintPerTel"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="办理状态" class="row-padding-bottom">
            <el-select
              v-model="filterField.status"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in handleStateOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用人单位" class="row-padding-bottom">
            <el-input
              v-model="filterField.complaintCompanyName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="收件日期" class="row-padding-bottom">
            <timeSelection
              @getStartTimeValue="getStartTimeValue"
              @getEndTimeValue="getEndTimeValue"
            ></timeSelection>
          </el-form-item>
          <el-form-item label="办结日期" class="row-padding-bottom">
            <timeSelection
              @getStartTimeValue="getStartTimeValueTwo"
              @getEndTimeValue="getEndTimeValueTwo"
            ></timeSelection>
          </el-form-item>
          <el-form-item label="是否延期" class="row-padding-bottom">
            <el-select
              v-model="filterField.isDelay"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in isDelayOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重复号码" class="row-padding-bottom">
            <el-select
              v-model="filterField.isRepeatTel"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in isRepeat"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重复诉求" class="row-padding-bottom">
            <el-select
              v-model="filterField.isRepeatNum"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in isRepeat"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编号" class="row-padding-bottom">
            <el-input
              v-model="filterField.numId"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="commonBtn"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="tableList">
        <el-row class="table-header">
          <el-col :span="12" style="text-align: left">
            <span>查询表格</span>
          </el-col>
          <el-col :span="12" class="table-btn">
            <el-button
              class="commonBut saveBtn funComBut bzjAddJc"
              icon="icon iconfont icondaochu"
              @click="getExportList"
            >
              <span class="opetareText">导出</span>
            </el-button>
          </el-col>
        </el-row>
        <el-table
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="numId" label="编号"></el-table-column>
          <el-table-column
            prop="createTime"
            label="专线收件时间"
            min-width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="repeatTelDesc"
            label="号码标记"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="repeatNumDesc"
            label="诉求标记"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="countyName"
            label="区县"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="streetName"
            label="街道"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="complaintContent"
            label="欠薪诉求"
            min-width="150"
            align="center"
          >
            <template slot-scope="scope">
              <p>{{ getSubStringSum(scope.row.complaintContent, 25) }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintPerName"
            label="投诉人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="complaintPerTel"
            label="联系电话"
            min-width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="complaintCompanyName"
            label="用人单位"
            min-width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="progressNewTime"
            label="最近办理进展"
            align="center"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="complaintEndDate"
            label="截止完成时间"
            min-width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="isDelay"
            label="是否延期"
            align="center"
            :formatter="formatIsDelay"
          ></el-table-column>
          <el-table-column
            prop="complaintSource"
            label="渠道来源"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="complaintManagerNames"
            label="办理责任人"
            min-width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="办理状态"
            align="center"
            :formatter="formatStatus"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            min-width="150"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toEdit(scope.$index, scope.row)"
                >编辑</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <paginationWH
          ref="pagination"
          @getList="getTableListData"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></paginationWH>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'specialAccountListList',
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      //表格数据
      tableList: [],
      requestUrl: 'api-r/rbp/list',
      date: [],
      //搜索条件
      filterField: {
        sendAreaId: '', //区域
        complaintPerName: '', //投诉人
        complaintPerTel: '', //联系电话
        status: 2, //办理状态
        complaintCompanyName: '', //用人单位
        createTimeStart: '', //收件起始日期
        createTimeEnd: '', //收件结束日期
        overDateStart: '', //办结起始日期
        overDateEnd: '', //办结结束日期
        isDelay: '', //是否延期（0：否，1：是）
        isRepeatTel: '', //是否重复号码（0：否，1：是）
        isRepeatNum: '', //是否重复诉求（0：否，1：是）
        numId: '', //编号
        isPerfect: '', //是否完善
        isTodayNoPro: 0, //今日未跟进
        isToday: 0, //是否今日新增
        isMine: 1, //是否我负责的诉求
        pageNo: 1, //页码
        pageSize: 20, //每页条数
      },
      handleStateOptions: [
        {
          code: 2,
          name: '办理中',
        },
        {
          code: 3,
          name: '待进一步办理',
        },
        {
          code: 1,
          name: '已办结',
        },
      ],
      isDelayOptions: [
        {
          code: '1',
          name: '是',
        },
        {
          code: '0',
          name: '否',
        },
      ],
      isRepeat: [
        {
          code: '1',
          name: '重复',
        },
        {
          code: '0',
          name: '非重复',
        },
      ],
    }
  },
  computed: { ...mapState(['areasOptions']) },
  mounted() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  watch: {
    type(newVal, oldVal) {
      if (newVal == 'processing') {
        this.$refs.pagination.getTableListData()
      }
    },
  },
  methods: {
    /**
     * @description: 导出报表
     */
    getExportList() {
      const vm = this
      let sendAreaId = vm.filterField.sendAreaId //区域
      let complaintPerName = vm.filterField.complaintPerName //投诉人
      let complaintPerTel = vm.filterField.complaintPerTel //联系电话
      let status = vm.filterField.status //办理状态
      let complaintCompanyName = vm.filterField.complaintCompanyName //用人单位
      let createTimeStart = vm.filterField.createTimeStart //收件起始日期
      let createTimeEnd = vm.filterField.createTimeEnd //收件结束日期
      let overDateStart = vm.filterField.overDateStart //办结起始日期
      let overDateEnd = vm.filterField.overDateEnd //办结结束日期
      let isDelay = vm.filterField.isDelay //是否延期（0：否，1：是）
      let isRepeatTel = vm.filterField.isRepeatTel //是否重复号码（0：否，1：是）
      let isRepeatNum = vm.filterField.isRepeatNum //是否重复诉求（0：否，1：是）
      let numId = vm.filterField.numId //编号
      let isPerfect = '' //是否完善
      let isTodayNoPro = 0 //今日未跟进
      let isToday = 0 //是否今日新增
      let isMine = 1 //是否我负责的诉求
      let pageNo = 1 //页码
      let pageSize = 20 //每页条数
      window.location.href =
        common.commonApi +
        'api-r/rbp/export?sendAreaId=' +
        sendAreaId +
        '&complaintPerName=' +
        complaintPerName +
        '&complaintPerTel=' +
        complaintPerTel +
        '&status=' +
        status +
        '&complaintCompanyName=' +
        complaintCompanyName +
        '&createTimeStart=' +
        createTimeStart +
        '&createTimeEnd=' +
        createTimeEnd +
        '&overDateStart=' +
        overDateStart +
        '&overDateEnd=' +
        overDateEnd +
        '&isDelay=' +
        isDelay +
        '&isRepeatTel=' +
        isRepeatTel +
        '&isRepeatNum=' +
        isRepeatNum +
        '&numId=' +
        numId +
        '&isPerfect=' +
        isPerfect +
        '&isTodayNoPro=' +
        isTodayNoPro +
        '&isToday=' +
        isToday +
        '&isMine=' +
        isMine +
        '&pageNo=' +
        pageNo +
        '&pageSize=' +
        pageSize +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    /**
     * @description: 格式化办理状态
     */
    formatStatus(row, column) {
      for (var i = 0; i < this.handleStateOptions.length; i++) {
        if (this.handleStateOptions[i].code == row.status) {
          return this.handleStateOptions[i].name
        }
      }
    },
    /**
     * @description: 格式化是否延期
     */
    formatIsDelay(row, column) {
      for (var i = 0; i < this.isDelayOptions.length; i++) {
        if (this.isDelayOptions[i].code == row.isDelay) {
          return this.isDelayOptions[i].name
        }
      }
    },
    /**
     * @description: 格式化最近办理进展
     */
    formatProgressNewTime(row, column) {
      for (var i = 0; i < this.handleStateOptions.length; i++) {
        if (this.handleStateOptions[i].code == row.progressNewTime) {
          return this.handleStateOptions[i].name
        }
      }
    },
    /**
     * @description: 新增欠薪诉求
     */
    addDeclare() {
      this.$router.push('/home/unpaidComplaint/newBackPayDemands')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 批量导入欠薪诉求
     */
    batchImport() {
      this.$router.push('/home/unpaidComplaint/batchImportCase')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 获取收件起始日期
     * @param {*} val
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createTimeStart = val
      } else {
        this.filterField.createTimeStart = ''
      }
    },
    /**
     * @description: 获取收件结束日期
     * @param {*} val
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createTimeEnd = val
      } else {
        this.filterField.createTimeEnd = ''
      }
    },
    /**
     * @description: 获取办结起始日期
     * @param {*} val
     */
    getStartTimeValueTwo(val) {
      if (val) {
        this.filterField.overDateStart = val
      } else {
        this.filterField.overDateStart = ''
      }
    },
    /**
     * @description: 获取办结结束日期
     * @param {*} val
     */
    getEndTimeValueTwo(val) {
      if (val) {
        this.filterField.overDateEnd = val
      } else {
        this.filterField.overDateEnd = ''
      }
    },
    getpageSize(val) {
      this.filterField.pageSize = val
    },
    getpageNo(val) {
      this.filterField.pageNo = val
    },
    /**
     * @description: 获取全部欠薪诉求
     * @param {*} data
     */
    getTableListData(data) {
      let totalCount
      this.tableList = data.results
      totalCount = data.totalCount
      this.$emit('getProcessingCount', totalCount)
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    /**
     * @description: 搜索欠薪诉求
     */
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    /**
     * @description: 欠薪诉求编辑
     * @param {*} index
     * @param {*} row
     */
    toEdit(index, row) {
      this.$router.push({
        path: '/home/unpaidComplaint/caseDetail',
        query: { id: row.id, type: 'myResponsible' },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 删除欠薪诉求
     * @param {*} index
     * @param {*} row
     */
    onDel(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delAllocatedSet(id)
        })
        .catch(() => {})
    },
    delAllocatedSet(id) {
      this.axios({
        method: 'post',
        url: 'api-r/rbp/delete',
        data: {
          rightsAppealId: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var sendAreaId = this.sendAreaId[this.sendAreaId.length - 1]
      this.filterField.sendAreaId = sendAreaId
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
}
.tableList {
  border-top: 10px solid #f5f7fa;
  padding: 20px 24px;
}
.table-header {
  width: 100%;
  font-size: 16px;
  color: #333333;
  padding: 20px 0px;
}
.table-btn {
  widows: 100%;
  height: 100%;
  text-align: right;
}
</style>
